<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../css/base1.css"/>
		<link rel="stylesheet" type="text/css" href="../css/forgetpassword.css"/>
		<link rel="stylesheet" type="text/css" href="../js/dist/font-awesome/css/font-awesome.css"/>
		<script src="../js/dist/js/rem.js"></script>
		<script src="../js/dist/js/zepto.min.js"></script>
	</head>
	<body>
		
		<header>
			<nav class="clear">
				<a href="#" onClick="javascript :history.back(-1)" >
					<i class="fa fa-sw fa-angle-left"></i>
				</a>
				 <p>忘记密码</p>
			</nav>
		</header>
		<p class="h1">请输入你绑定的手机号码</p>
		<div class="from">
			<div>
				<img src="../img/phone1.png" alt="" />
				<input type="text" placeholder="手机号码" class="phone"/>
			</div>
			<form>
				<input type="button" value="下一步" class="btn"/>
			</form>	
		</div>
		<div class="bg"></div>
		<div class="box">
			<div class="alert clear">
		     <h1></h1>
		     <p class="p1"></p>
		     <p class="p2"></p>
		     <div class="height"></div>
		     <input type="button" value="取消" class="btn1"/>
		     <input type="button" value="确定" class="btn2"/>
		</div>
		</div>
		
	</body>
	<script>
		$(function(){
			$(".btn").on("tap",function(){
				
				$('.box').show()
				$('.bg').show()
				var val = $('.phone').val()
				var str = /^[0,1](\d{10})$/
				if(val==''){
					$('.alert h1').html("手机号码不能为空")
				}else if(!str.test($(".phone").val())){
					 $('.alert h1').html("手机号码不正确")
				}else{
					 $('.alert h1').html("确认手机号码")
					 $('.alert .p1').html("我们将发送验证码到 :")
					 $('.alert .p2').html(val)	
					 $(".btn2").on("tap",function(){
				       window.location.href="yanzhengma.html"
			})
				}
				
			})
			$(".btn1").on("tap",function(){
				$('.box').hide()
				$('.bg').hide()
			})
			$(".btn2").on("tap",function(){
				$('.box').hide()
				$('.bg').hide()
			})
			
		})
	</script>
</html>
